<template>
	<div class="content">
		<image src="/static/images/register_bg.png" style="width: 750rpx;position: fixed;top: 0rpx;z-index: -1;"
			mode="widthFix"></image>

		<div style="display: flex;align-items: center;width: 750rpx;padding: 50rpx;margin: 50rpx auto 10rpx auto;">
			<image src="/static/images/logo-icon.png" style="width: 60rpx;" mode="widthFix"></image>
			<div style="padding: 10rpx;font-size: 56rpx;border-radius: 8rpx;font-weight: bold;color: darkslategray;">
				用户注册</div>
		</div>

		<div style="padding: 60rpx;background: white;border-radius: 32rpx;box-shadow: 0rpx -2rpx 5rpx #0055ff11;">
			<div style="display: flex;flex-direction: column;align-items: center;">
				<div class="avatarView" @click="uploadAvatar">
					<image v-if="avatar" :src="avatar" mode="" class="avatarImage"></image>
					<u-icon v-else name="plus" size="40rpx" />
				</div>
				<div>
					上传头像
				</div>
			</div>

			<div class="inputView">
				<u-field v-model="account" icon="integral" :border-bottom="false" label-width="0"
					placeholder="请填写账号">
				</u-field>
			</div>
			<div class="inputView">
				<u-field v-model="name" icon="account" :border-bottom="false" label-width="0"
					placeholder="请填写姓名/昵称">
				</u-field>
			</div>
			<div class="inputView">
				<u-field v-model="phone" icon="phone" :border-bottom="false" label-width="0"
					placeholder="请填写手机号">
				</u-field>
			</div>
			<div class="inputView">
				<u-field v-model="password" type="password" icon="lock" label-width="0" placeholder="请填写密码">
				</u-field>
			</div>
			<div class="inputView">
				<u-field v-model="passwordrepeat" type="password" icon="lock-fill" label-width="0" placeholder="请重复填写密码">
				</u-field>
			</div>

			<div style="margin-top: 20rpx;">
				<u-button @click="register" type="warning" shape="circle" style="height: 100rpx;">注 册</u-button>
			</div>
			<div style="margin-top: 20rpx;display: flex;justify-content: space-between;padding: 20rpx 20rpx;">
				<div>已经有有账号? <span @click="goLogin" style="color: dodgerblue;"> 去登录</span> </div>
			</div>
		</div>
	</div>
</template>
<script>
	import util from '../../utils/index.js'
	export default {
		data() {
			return {
				account: '',
				password: '',
				passwordrepeat:'',
				avatar: '',
				phone:'',
				name:''
			}
		},
		methods: {
			register:async function(){
				if(!this.account || !this.password || !this.avatar || !this.phone || !this.name){
					uni.showToast({
						title:"请将信息填写全",
						icon:"none"
					})
					return
				}
				if(this.password != this.passwordrepeat){
					uni.showToast({
						title:"两次密码输入不一致",
						icon:"none"
					})
					return
				}
				const data = {
					account:this.account,
					name:this.name,
					phone:this.phone,
					avatar:this.avatar,
					password:this.password,
				}
				const ret = await this.$u.post(`user/user/register`,data)
				console.log(ret)
				if(ret.success){
					uni.showToast({
						title:"注册成功",
						success() {
							uni.redirectTo({
								url:"/pages/login/login"
							})
						}
					})
				}else{
					uni.showToast({
						title:ret.message
					})
				}
			},
			goLogin: function() {
				uni.redirectTo({
					url: "/pages/login/login"
				})
			},
			uploadAvatar: function(){
				const _this = this
				uni.chooseImage({
					count:1,
					success: async function(e) {
						uni.showLoading({
							title:'上传中..'
						})
						const filePath = e.tempFilePaths[0]
						const ret = await util.uploadImage(filePath)
						
						if(ret.success){
							console.log(22,ret.data.pathname)
							_this.avatar = ret.data.pathname
						}else{
							uni.showToast({
								title:"上传失败",
								icon:"none"
							})
						}
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.inputView {
		height: 100rpx;
		background: #f1f1f1;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		margin-top: 25rpx;
	}

	.avatarView {
		width: 120rpx;
		height: 120rpx;
		background: #f1f1f1;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 60rpx;
	}

	.avatarImage {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
	}
</style>